<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画Show与Hide</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		
		<style type="text/css">
			body, div{
				margin: 0;
				padding: 0;
			}
			#div1{
				border-radius: 10px;
			}
			
			div{
				width:80%;
				height: 200px;
				background-color: #f00;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="Action" />
		<div id="div1">
		</div>
		
		<script type="text/javascript">
			// 1. show和hide 
			$(function(){
				// 默认,不带参数的动画 == display:none|block
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	
				// 	if($div1.is(':hidden')){
				// 		$div1.show();
				// 	}else{
				// 		$div1.hide();
				// 	}
				// });
				
				// 带参数
				// 1. 动画持续的时间(ms)
				// 2. callback,回调函数,用于在动画结束时调用
				$('#btn').click(function(e){
					var $div1 = $('#div1');
					var originBackGround = '#f00';
					
					if($div1.is(':hidden')){
						$div1.show(1500, function(e){
							originBackGround = $div1.css('background-color');
							$div1.css('background-color','#0ff');
						});
					}else{
						$div1.hide(1500, function(e){
							$div1.css('background-color',originBackGround);
						});
					}
				});
				// 能否用一个函数来代替呢？sure
			
			
				// show/hide/if-is ==> toggle
				
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	var originBackGround = '#f00';
				// 	 
				// 	 $div1.toggle(1500, function(e){
				// 		if(!$div1.is(':hidden')){
				// 			originBackGround = $div1.css('background-color');
				// 			$div1.css('background-color','#0ff');
				// 		} else{
				// 			$div1.css('background-color',originBackGround);
				// 		}
				// 	 });
				// });
			
				// 2. slideUp / slideDown / 
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	var originBackGround = '#f00';
				// 	
				// 	if($div1.is(':hidden')){
				// 		$div1.slideDown(3000, 'linear', function(){
				// 			originBackGround = $div1.css('background-color');
				// 			$div1.css('background-color','#0ff');
				// 		});
				// 	}else{
				// 		$div1.slideUp(3000, 'swing', function(){
				// 			$div1.css('background-color', originBackGround);
				// 		});
				// 	}
				// });
				
				// 2.1 slideToggle 代替 slideUp和slideDown
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	var originBackGround = '#f00';
				// 	
				// 	$div1.slideToggle(1500, function(e){
				// 		if(!$div1.is(':hidden')){
				// 			originBackGround = $div1.css('background-color');
				// 			$div1.css('background-color','#0ff');
				// 		}else{
				// 			$div1.css('background-color', originBackGround);
				// 		}
				// 	});
					
				// });
				
				// 3.fadeOut / fadeIn/ fadeToggle
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	var originBackGround = '#f00';
				// 	
				// 	if($div1.is(':hidden')){
				// 		$div1.fadeIn(3000, 'linear', function(){
				// 			originBackGround = $div1.css('background-color');
				// 			$div1.css('background-color','#0ff');
				// 		});
				// 	}else{
				// 		$div1.fadeOut(3000, 'swing', function(){
				// 			$div1.css('background-color', originBackGround);
				// 		})
				// 	}
				// });
				
				// 3.1 fadeToggle 代替 fadeOut/ fadeIn 
			
				// $('#btn').click(function(e){
				// 	var $div1 = $('#div1');
				// 	var originBackGround = '#f00';
				// 	
				// 	$div1.fadeToggle(1000, function(){
				// 		if($div1.is(':hidden')){
				// 			originBackGround = $div1.css('background-color');
				// 			$div1.css('background-color','#0ff');
				// 		}else{
				// 			$div1.css('background-color',originBackGround);
				// 		}
				// 	});
				// });
				
				
				// 基础jQuery动画的缺点
				// 		1. 效果很low, 而且效果没有办法改变, 无法维护和定制
				//		2. 底层的技术使用定时器实现的, 效率比较低, 基于transition
				
				// 基础jQuery是不是就没有？
				//  	1. No, --> Demo
				// 		2. 外包程序
			});
			
		</script>
	</body>
</html>
